import React from "react";
import {Table, Breadcrumb, Button, Icon, Input, Tag, Descriptions, message, Modal} from 'antd';
import {_updateOrderById} from "../../../utils/apiList";

const {Search} = Input;

class EditOrder extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            orderInfo: {},
            productInfo: [{productNo: '', productName: '', brandName: '', price: '', color: '', number: '', size: '',}],
            visible: false
        };
    }

    componentDidMount() {

    }

    showModal = (orderInfo) => {
        const productInfo = orderInfo.extInfo ? orderInfo.extInfo : '[{}]';
        this.setState({
            visible: true,
            orderInfo,
            productInfo: JSON.parse(productInfo)
        });
    };

    handleCancel = () => {
        this.setState({visible: false});
    };

    handleCreate = () => {
        const {orderInfo, productInfo} = this.state;
        const params = orderInfo;
        params.extInfo = JSON.stringify(productInfo);
        _updateOrderById(params).then((res) => {
            if (res.data.success) {
                message.success(<b>新增成功</b>, 3);
                this.setState({visible: false});
                this.props.parent.loadTable();
            } else {
                message.error(<b>{res.data.msg}</b>, 3);
            }
        }).catch(error => {
            message.error(<b>请求失败！</b>, 3);
        });
    };

    handleDelProductInfo = (index) => {
        const {productInfo} = this.state;
        productInfo.splice(index, 1);
        this.setState({productInfo})
    };

    handleAddProductInfo = (index) => {
        const {productInfo} = this.state;
        productInfo.push({productNo: '', productName: '', brandName: '', price: '', color: '', number: '', size: '',});
        this.setState({productInfo})
    };

    handleChangeProductInfo = (index, key, e) => {
        const {value} = e.target;
        const {productInfo} = this.state;
        productInfo[index][key] = value;
        this.setState({productInfo})
    };

    render() {
        const {orderInfo, productInfo, visible} = this.state;
        const columns = [
            {
                title: '货号',
                dataIndex: 'productNo',
                key: 'productNo',
                render: (text, record, index) => (
                    <Input placeholder={'货号'} value={text} onChange={(e) => this.handleChangeProductInfo(index, 'productNo', e)}/>),
            },
            {
                title: '名称',
                dataIndex: 'productName',
                key: 'productName',
                render: (text, record, index) => (
                    <Input placeholder={'名称'}
                           value={text}
                           onChange={(e) => this.handleChangeProductInfo(index, 'productName', e)}/>),
            },
            {
                title: '品牌',
                dataIndex: 'brandName',
                key: 'brandName',
                render: (text, record, index) => (
                    <Input placeholder={'品牌'} value={text} onChange={(e) => this.handleChangeProductInfo(index, 'brandName', e)}/>),
            },
            {
                title: '价格',
                dataIndex: 'price',
                key: 'price',
                render: (text, record, index) => (
                    <Input placeholder={'价格'} value={text} onChange={(e) => this.handleChangeProductInfo(index, 'price', e)}/>),
            },
            {
                title: '颜色',
                dataIndex: 'color',
                key: 'color',
                render: (text, record, index) => (
                    <Input placeholder={'颜色'} value={text} onChange={(e) => this.handleChangeProductInfo(index, 'color', e)}/>),
            }, {
                title: '尺码',
                dataIndex: 'size',
                key: 'size',
                render: (text, record, index) => (
                    <Input placeholder={'尺码'} value={text} onChange={(e) => this.handleChangeProductInfo(index, 'size', e)}/>),
            }, {
                title: '数量',
                dataIndex: 'number',
                key: 'number',
                render: (text, record, index) => (
                    <Input placeholder={'数量'} value={text} onChange={(e) => this.handleChangeProductInfo(index, 'number', e)}/>),
            }, {
                title: '',
                dataIndex: 'operationDel',
                key: 'operationDel',
                width: 40,
                render: (text, record, index) => (productInfo.length === 1 && index === 0 ? null :
                    <Icon type="close" value={text} onClick={() => this.handleDelProductInfo(index)}/>),
            }, {
                title: '',
                dataIndex: 'operationAdd',
                key: 'operationAdd',
                width: 40,
                render: (text, record, index) => (productInfo.length === index + 1 ?
                    <Icon type="plus" value={text} onClick={() => this.handleAddProductInfo(index)}/> : null),
            },];
        return (
            <Modal
                visible={visible}
                title={'借衣单审核'}
                okText="审核通过"
                cancelText="再想想"
                onCancel={this.handleCancel}
                onOk={this.handleCreate}
                centered
                width={'70vw'}
                bodyStyle={{maxHeight: '70vh', overflow: 'scroll'}}>
                <Descriptions
                    bordered
                    column={12}
                    layout="vertical"
                >
                    <Descriptions.Item span={4}
                                       label="创建时间">{orderInfo.lendStatus ? orderInfo.lendStatus : null}</Descriptions.Item>
                    <Descriptions.Item span={4}
                                       label="更新时间">{orderInfo.lendStatus ? orderInfo.lendStatus : null}</Descriptions.Item>
                    <Descriptions.Item span={4}
                                       label="经手人">{orderInfo.operator ? orderInfo.operator : null}</Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="借用人员">{orderInfo.lendPerson ? orderInfo.lendPerson : null}</Descriptions.Item>
                    <Descriptions.Item span={3} label="微信ID"></Descriptions.Item>
                    <Descriptions.Item span={3} label="所属公司"></Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="联系电话">{orderInfo.receivePhonenumber ? orderInfo.receivePhonenumber : null}</Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="试衣日期">{orderInfo.lendTimeDura ? orderInfo.lendTimeDura : null}</Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="归还日期">{orderInfo.returnTime ? orderInfo.returnTime : null}</Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="借用艺人">{orderInfo.star ? orderInfo.star : null}</Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="拍摄主题">{orderInfo.photoTheme ? orderInfo.photoTheme : null}</Descriptions.Item>
                    <Descriptions.Item span={12} label="产品信息">
                        <Table
                            columns={columns}
                            dataSource={productInfo}
                            pagination={false}
                        />
                    </Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="送达日期">{orderInfo.lendTimeDura ? orderInfo.lendTimeDura : null}</Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="配送方式">{orderInfo.sendMethod ? orderInfo.sendMethod : null}</Descriptions.Item>
                    <Descriptions.Item span={6}
                                       label="配送地址">{orderInfo.receiveAddress ? orderInfo.receiveAddress : null}</Descriptions.Item>
                    <Descriptions.Item span={6}
                                       label="快递单号">{orderInfo.productNumber ? orderInfo.productNumber : null}</Descriptions.Item>
                    <Descriptions.Item span={6}
                                       label="快递费用">{orderInfo.sendPayment ? orderInfo.sendPayment : null}</Descriptions.Item>
                </Descriptions>
            </Modal>
        );
    }
}

export default EditOrder;